<template>
    <div class="component-preview-wrapper">
        <!-- 输入框 -->
        <div v-if="component.type === 'input'" class="form-field">
            <label class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</label>
            <input type="text" class="form-input" :placeholder="component.placeholder || `请输入${component.label}`" />
        </div>

        <!-- 单选 -->
        <div v-else-if="component.type === 'radio'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="field-remark" v-if="component.remark">{{ component.remark }}</div>
            <div class="radio-group">
                <div class="radio-item" v-for="(option, index) in component.options" :key="index">
                    <img src="https://image.lutongjiakao.com/system/cd5a864e101f46dc8cf64641098126c1.png" alt="">
                    <span class="f15">
                        {{ option.label }}
                    </span>
                </div>
            </div>
        </div>

        <!-- 多选 -->
        <div v-else-if="component.type === 'checkbox'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="field-remark" v-if="component.remark">{{ component.remark }}</div>
            <div class="radio-group">
                <div class="radio-item" v-for="(option, index) in component.options" :key="index">
                    <img src="https://image.lutongjiakao.com/system/09cf63dc47a94dcc870df706dde897b4.png" alt="">
                    <span class="f15">
                        {{ option.label }}
                    </span>
                </div>
            </div>
        </div>

        <!-- 日期 -->
        <div v-else-if="component.type === 'date'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="field-remark" v-if="component.remark">{{ component.remark }}</div>
            <div class="field-date" v-if="component.date <= 2">
                {{ component.date === '1' ? '年-月-日' : '年-月' }}
            </div>
            <div class="field-date1" v-else>
                <span>开始日期</span>
                <span style="color: #666;font-size: 14px;">至</span>
                <span>结束日期</span>
            </div>
        </div>

        <!-- 时间 -->
        <div v-else-if="component.type === 'time'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="field-remark" v-if="component.remark">{{ component.remark }}</div>
            <div class="field-date">
                时 分
            </div>
        </div>

        <!-- 图片上传 -->
        <div v-else-if="component.type === 'upload'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="field-remark" v-if="component.remark">{{ component.remark }}</div>
            <div class="upload-area">
                <i class="iconfont-sys">&#xe83e;</i>
            </div>
        </div>

        <!-- 文本框 -->
        <div v-else-if="component.type === 'textarea'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="field-remark" v-if="component.remark">{{ component.remark }}</div>
            <div class="field-text">
                {{ component.defaultText }}
            </div>
        </div>

        <!-- 富文本 -->
        <div v-else-if="component.type === 'richText'" class="form-field">
            <div class="field-rich" v-html="component.richText"></div>
        </div>

        <!-- 图片 -->
        <div v-else-if="component.type === 'image'" class="form-image">
            <div class="image-placeholder" :class="{ 'isImage': !component.image }">
                <i class="iconfont-sys" v-if="!component.image">&#xe7dd;</i>
                <el-image :src="component.image" v-else></el-image>
            </div>
        </div>

        <!-- 分隔栏 -->
        <div v-else-if="component.type === 'divider'" class="form-divider">
            <div class="divider"></div>
        </div>

        <!-- 姓名 -->
        <div v-else-if="component.type === 'name'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="field-remark" v-if="component.remark">{{ component.remark }}</div>
            <div class="field-date">
                {{ component.defaultText }}
            </div>
        </div>

        <!-- 性别 -->
        <div v-else-if="component.type === 'gender'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="radio-group">
                <div class="radio-item" v-for="(option, index) in component.options" :key="index">
                    <img src="https://image.lutongjiakao.com/system/cd5a864e101f46dc8cf64641098126c1.png" alt="">
                    <span class="f15">
                        {{ option.label }}
                    </span>
                </div>
            </div>
        </div>

        <!-- 年龄 -->
        <div v-else-if="component.type === 'age'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="field-remark" v-if="component.remark">{{ component.remark }}</div>
            <div class="field-date">
                {{ component.defaultText }}
            </div>
        </div>

        <!-- 公司 -->
        <div v-else-if="component.type === 'company'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="field-remark" v-if="component.remark">{{ component.remark }}</div>
            <div class="field-date">
                {{ component.defaultText }}
            </div>
        </div>

        <!-- 职位 -->
        <div v-else-if="component.type === 'position'" class="form-field">
            <label class="field-label">{{ component.label }}</label>
            <input type="text" class="form-input" :placeholder="component.placeholder || '请输入职位'" />
        </div>

        <!-- 手机号码 -->
        <div v-else-if="component.type === 'phone'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="field-remark" v-if="component.remark">{{ component.remark }}</div>
            <div class="field-date">
                {{ component.defaultText }}
            </div>
        </div>

        <!-- 身份证号 -->
        <div v-else-if="component.type === 'idcard'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="field-remark" v-if="component.remark">{{ component.remark }}</div>
            <div class="field-date">
                {{ component.defaultText }}
            </div>
        </div>

        <!-- 微信号 -->
        <div v-else-if="component.type === 'wechat'" class="form-field">
            <label class="field-label">{{ component.label }}</label>
            <input type="text" class="form-input" :placeholder="component.placeholder || '请输入微信号'" />
        </div>

        <!-- 地址 -->
        <div v-else-if="component.type === 'address'" class="form-field">
            <div class="field-label" :class="{ 'field-required': component.required }">{{ component.label }}</div>
            <div class="field-remark" v-if="component.remark">{{ component.remark }}</div>
            <div class="field-date">
                {{ component.addressType === '1' ? '省' : component.addressType === '2' ? '省 市' : '省 市 区/县' }}
            </div>
            <div class="field-date marT10" v-if="component.addressType === '4'">
                详细地址
            </div>
        </div>

        <!-- 邮箱 -->
        <div v-else-if="component.type === 'email'" class="form-field">
            <label class="field-label">{{ component.label }}</label>
            <input type="email" class="form-input" :placeholder="component.placeholder || '请输入邮箱地址'" />
        </div>

        <!-- 默认显示 -->
        <div v-else class="form-field">
            <label class="field-label">{{ component.label }}</label>
            <div class="unknown-component">
                <span>未知组件类型: {{ component.type }}</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

defineProps<{
    component: any
}>()
</script>

<style lang="scss" scoped>
.component-preview-wrapper {
    width: 100%;
}

.form-field {
    margin-bottom: 16px;
    padding: 15px;

    &:last-child {
        margin-bottom: 0;
    }
}

.form-divider {
    padding: 10px 0;
}

.radio-group {
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    overflow: hidden;

    .radio-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-bottom: 1px solid #e4e4e4;

        img {
            width: 16px;
            height: 16px;
        }

        .f15 {
            font-size: 13px;
            color: #999;
        }
    }

    .radio-item:last-child {
        border-bottom: none;
    }

}

.field-label,
.field-rich {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.field-label {
    margin-bottom: 8px;
}

.field-remark {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    color: rgb(153, 153, 153);
}

.field-text {
    padding: 12px 16px;
    min-height: 95px;
    line-height: 20px;
    border-radius: 4px;
    border: .5px solid #ebebeb;
    word-break: break-all;
    color: rgb(153, 153, 153);
    font-size: 14px;
}

.field-date,
.field-date1 {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 44px;
    border: 1px solid rgba(200, 200, 200, .5);
    border-radius: 4px;
    color: rgb(153, 153, 153);
    font-size: 14px
}

.field-date1 {
    justify-content: space-evenly;
}

.field-required::after {
    content: "*";
    margin-left: 4px;
    color: #ff4747;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background: #fff;
    transition: border-color 0.2s ease;

    &:focus {
        outline: none;
        border-color: #1677ff;
        box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
    }

    &::placeholder {
        color: #999;
    }
}

.form-textarea {
    min-height: 80px;
    resize: vertical;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;

    input[type="radio"],
    input[type="checkbox"] {
        margin: 0;
    }
}

.upload-area {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background-color: #f0f0f0;
}

.upload-placeholder {
    color: #999;
    font-size: 14px;

    span {
        font-size: 24px;
        display: block;
        margin-bottom: 8px;
    }
}

.text-description {
    padding: 12px;
    background: #f5f5f5;
    border-radius: 4px;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.image-placeholder {
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
        width: 100%;
        height: 100%;
    }
}

.isImage {
    background-color: rgb(214, 237, 255);
}

.divider {
    height: 12px;
    background: #e4e4e4;
}

.unknown-component {
    padding: 12px;
    background: #fff2e8;
    border: 1px solid #ffb366;
    border-radius: 4px;
    color: #d46b08;
    font-size: 14px;
    text-align: center;
}

.marT10 {
    margin-top: 10px;
}
</style>
